import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({})
export default class TimelineBase extends Vue {
  private slotOthers: boolean = false
  private iconSizeData: any = {
    small: {
      top: '.28em',
      left: '-34px',
      width: '10px',
      height: '10px',
    },
    medium: {
      top: '0em',
      left: '-39.5px',
      height: '20px',
      width: '20px',
    },
    large: {
      top: '-0.5em',
      left: '-44px',
      height: '30px',
      width: '30px',
    },
  }

  @Prop({ type: String, default: '' }) private pointColor!: string
  @Prop({ type: String, default: '#F5F7F9' }) private bgColor!: string
  @Prop({ type: String, default: '#fff' }) private borderColor!: string
  @Prop({ type: String, default: '' }) private lineColor!: string
  @Prop({ type: Boolean, default: false }) private hollow!: boolean
  @Prop({ type: String, default: '' }) private iconSize!: string
  @Prop({ type: String, default: '#37414a' }) private fontColor!: string
  @Prop({ type: String, default: '#ffffff' }) private shadow!: string

  get circleStyle() {
    if (!this.pointColor && !this.lineColor && !this.hollow && !this.iconSize)
      return {}
    let style = {}
    if (this.pointColor) {
      style = {
        border: `1px solid ${this.pointColor}`,
        'background-color': this.pointColor,
      }
    }
    if (this.lineColor) {
      style = Object.assign({}, style, {
        border: `4px solid ${this.lineColor}`,
        left: '-38px',
        width: '13px',
        height: '13px',
      })
    }
    if (this.iconSizeData[this.iconSize]) {
      style = Object.assign({}, style, this.iconSizeData[this.iconSize])
    }

    return style
  }
  get itemStyle() {
    return {
      color: this.fontColor,
      backgroundColor: this.bgColor,
      borderColor: this.borderColor,
      boxShadow: `0px 2px 6px 0px ${this.shadow}`,
    }
  }
  get slotClass() {
    let className = ''
    if (this.slotOthers) {
      className = 'timeline-others'
    } else if (this.hollow) {
      className = 'hollow'
    }

    return className
  }

  private mounted() {
    this.slotOthers = !!(this.$refs.others as any).innerHTML
  }
}
